<template>
  <div>
    <!-- 头部组件 -->
    <van-nav-bar fixed placeholder :border="false" class="navbar">
      <template #left>
        <van-icon name="arrow-left" color="#fff" @click="$router.go(-1)" />
      </template>
      <template v-slot:title> 关于PI Music </template>
    </van-nav-bar>
    <!-- 主体内容 -->
    <div class="content" @touchmove.prevent>
      <div class="logo">
        <img src="../assets/images/logo.jpg" />
      </div>
      <p>该项目是使用<b>Vue2.x</b>版本编写的</p>
      <p>使用的UI框架<b>Vant</b></p>
      <p>登录请注意<b>账号安全</b></p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 禁止滚动
    unScroll() {
      var top = $(document).scrollTop();
      $(document).on("scroll.unable", function (e) {
        $(document).scrollTop(top);
      });
    },
  },
  create() {
    this.unScroll();
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  padding-top: 30px;
  background-image: url(../assets/images/bgcimage.jpg);
  background-size: cover;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  width: 100vw;
  .logo {
    margin-bottom: 10%;
    width: 100px;
    height: 100px;
    > img {
      width: inherit;
      height: inherit;
    }
  }
  > p {
    font-size: 14px;
    color: #5b5b5b;
    line-height: 30px;
  }
}
</style>